<template>
  <div class="home">
    <div class="h-l-nav">
      <sider dir="column" :topdata="topdata" class="h-sider"></sider>
    </div>
    <div class="h-r-main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import sider from "@/components/topnav/topnav";

export default {
  name: "Home",
  components: { sider },
  data() {
    return {
      topdata: [
        {
          content: "后台首页",
          currentpath: "/home/backstage",
        },
        {
          content: "相册管理",
          currentpath: "/home/album",
        },
        {
          content: "商品列表",
          currentpath: "/home/goodslist",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  .h-l-nav {
    width: 15%;
    height: 100%;
    border-right: 1px solid gainsboro;
    /deep/.h-sider {
      width: 100%;
      height: 100%;
      ul {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        li {
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-left: 10px;
        }
        .router-link-exact-active {
          color: goldenrod;
          border-bottom: 2px solid goldenrod;
        }
      }
    }
  }
  .h-r-main{
    width: 100%;
  }
}
</style>
